<template>
  <view
    class="add-pop w100 h100 center form-ret-padd"
    :style="{ '--theme': themeColor }"
    v-if="visible"
  >
    <view class="content">
      <view class="form">
        <view class="title text-center">{{
          editForm.title ? "编辑分类" : "添加分类"
        }}</view>
        <view>
          <u--form :model="form" :rules="rules" ref="form1">
            <u-form-item prop="title" labelWidth="0rpx">
              <view class="show-count">
                <u--input
                  v-model="form.title"
                  maxlength="10"
                  placeholder="请输入分类名称"
                />
                <view class="num">{{ form.title.length || 0 }}/10</view>
              </view>
            </u-form-item>
          </u--form>
        </view>
      </view>
      <view class="btns flex">
        <view @click="cancelModal" class="flex1 center">取消</view>
        <view @click="save()" class="flex1 center save">保存</view>
      </view>
    </view>
  </view>
</template>
<script>
import { addClass, updateClass } from "@/service/api/sp-product/index";
export default {
  data() {
    return {
      form: {
        title: "",
        parentId: 0,
      },
      rules: {
        title: [
          {
            type: "string",
            required: true,
            message: "请输入分类名称",
            trigger: ["blur", "change"],
          },
          {
            type: "string",
            required: true,
            max: 10,
            message: "超出最大可输入内容",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  computed: {
    themeColor({ $theme }) {
      return $theme.themeColor.primary;
    },
  },

  props: {
    visible: {
      default: false,
    },
    editForm: {
      required: false,
    },
  },
  watch: {
    editForm(val) {
      if (val.id) {
        this.form = val;
      }
    },
  },
  methods: {
    save() {
      this.$refs.form1.validate().then((res) => {
        let { form } = this;
        if (form.id) {
          updateClass(form).then((res) => {
            this.$emit("addsuccess");
            this.cancelModal();
          });
        } else {
          addClass(form).then((res) => {
            this.$store.dispatch("sp-product/index/setCalssifyList");
            this.$emit("addsuccess");
            this.cancelModal();
          });
        }
      });
    },
    cancelModal() {
      (this.form = {
        title: "",
        parentId: 0,
      }),
        this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang='scss' scoped>
.add-pop {
  position: fixed;
  z-index: 10076;
  background-color: #00000080;
  top: 0;
  left: 0;
  &::v-deep .u-form-item__body {
    padding: 0 !important;
  }
  .content {
    background: #fff;
    width: calc(100% - 250rpx);
    padding: 40rpx 0 0;
    border-radius: 12rpx;
    overflow: hidden;
    .form {
      padding: 0 47rpx;
    }
    .title {
      font-size: 32rpx;
      color: #131313;
      font-weight: 500;
      margin-bottom: 35rpx;
    }
    .btns {
      margin-top: 25rpx;
      view {
        height: 80rpx;
        color: var(--theme);
        border-top: 1px solid #eee;
      }
      .save {
        background-color: var(--theme);
        color: #fff !important;
        border-color: var(--theme) !important;
      }
    }
  }
}
</style>
